<template>
    <div class="container">
        <!-- 导航栏区域开始 -->
        <TridentNavBar>
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #default>通讯录标签</template>
        </TridentNavBar>
        <!-- 导航栏区域结束 -->

        <!-- 列表区域开始 -->
        <div class="list-wrap">
            <van-swipe-cell v-for="(item, index) in 20" :key="index">
                <van-cell is-link :title="`大头领(${index})`" label="农夫大兔子" @click="$router.push('/contact')"/>
                <template #right>
                    <van-button square text="删除" type="danger" style="height: 100%;" />
                </template>
            </van-swipe-cell>
        </div>
        <!-- 列表区域结束 -->

        <!-- 操作栏区域开始 -->
        <div class="operate-wrap">
            <span @click="handleAdd">添加</span>
            <span @click="$router.push('/contact')">管理</span>
        </div>
        <!-- 操作栏区域结束 -->

        <!-- 添加标签弹层区域开始 -->
        <van-popup
            v-model:show="showPopup"
            position="bottom"
            closeable
            round
            :style="{ height: '20%' }"
        >
            <div class="popup-wrap">
                <div class="title-box">添加标签</div>
                <van-field v-model="name" label="标签名" placeholder="请输入标签名" />
                <div class="btn-box">
                    <van-button block color="#27BA9B" type="primary" size="small">保存</van-button>
                </div>
            </div>
        </van-popup>
        <!-- 添加标签弹层区域结束 -->
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)

const name = ref('')

const handleAdd = () => {
    showPopup.value = true
}
</script>

<style scoped lang="scss">
page,
.container {
    height: 100vh;

    // 列表区域开始
    .list-wrap {
        padding-top: 45px;
        padding-bottom: 55px;
    }

    // 操作栏区域开始
    .operate-wrap {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 50px;
        background-color: #EDEDED;
        padding: 0 15px;

        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
            background-color: #27BA9B;
            border: 1px solid #ffffff;
            color: #fff;
            height: 35px;
            width: 65px;
            text-align: center;
            line-height: 35px;
            border-radius: 4px;
            &:last-child {
                background-color: #049d0e;
            }
        }
    }

    // 添加标签弹层区域开始
    .popup-wrap {
        .title-box {
            margin-top: 20px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px
        }

        .btn-box {
            display: flex;
            justify-content: center;
            margin-top: 5px;
        }
    }
}
</style>